<style lang="scss">
@import "./uv.scss";
</style>
<template>
  <div class="p1756533109" :class="'p1756533109-' + form.service_status">
    <!-- <uv-navbar class="" autoBack placeholder bgColor="#fff" title="订单详情" /> -->
    <div style="position: relative;z-index: 999;">
      <u-order-pop @success="successChange" @close="closeChange" :taskForm="form" ref="orderPop"></u-order-pop>
    </div>
    <uv-popup closeable ref="payPopup" @change="payTypeClose" mode="bottom" :close-on-click-overlay="false">
      <div>
        <u-pay @payChange="payClick" ref="payVue"></u-pay>
      </div>
    </uv-popup>
    <uv-popup ref="popPwdRef" mode="center" round="10" @change="popPwdChange" :close-on-click-overlay="false" closeable>
      <div class="pay-pop">
        <div class="p1755763657">输入密码</div>
        <div class="p1755763837">
          <uv-input placeholder="请输入支付密码" type="password" border="surround" v-model="paymentForm.password"></uv-input>
        </div>
        <div @click="confirmPaymentTap" class="p1755763584">确认支付</div>
      </div>
    </uv-popup>

    <u-my-layOut :showNavbar="false" :navbarOption="{bgColor: 'rgba(255,255,255,1)', title: '订单详情'}" :color="{statusBarHeightColor: 'rgba(255,255,255,1)'}">
      <template v-slot:main>
        <div style="height: 100%;overflow-y: auto;">
          <uv-sticky v-if="form.id && form.service_status != 4 && form.service_status !=5"  :offset-top="-150">
            <u-lst-map ref="uMapVue" :orderForm="form"></u-lst-map>
          </uv-sticky>
          <div class="p1756534039 pl30 pr30">
            <u-order-top :taskForm="form"></u-order-top>
            <div class="mt20">
              <u-information :taskForm="form"></u-information>
            </div>
            <div class="mt20">
              <u-order-revenue class="" :taskForm="form"></u-order-revenue>
            </div>
            <div class="mt20 pb30">
              <u-order-time :taskForm="form" class="mt20"></u-order-time>
            </div>
          </div>
        </div>
      </template>

      <template v-slot:footer>
        <div v-if="form.service_status == 1" class="p1756191456  p30 fac jcc" style="z-index: 973;left: 0;width: 100%;" :style="{bottom: `${menuButtonInfo().bottom}px`}">
          <uv-button size="mini" @click="grabOrdersTap(routeQuery.id, res => res && _initPage())" text="">
            <div class="fz36 p1756193077" style="color: #fff;">抢单</div>
          </uv-button>
        </div>
        <div v-else class="fac common-footer p1756716066 pr30 pt20 jcsb " style="width: 100%;box-sizing: border-box;">
          <div style="min-width: 45%;" class="p1756882892 fac jcsb">
            <div class="p1756456030 fac jcc" style="box-sizing: border-box;">
              <uv-icon name="phone-fill" color="#333" size="45rpx"></uv-icon>
              <div style="color: #3E3A39;" class="fz28">联系</div>
            </div>
            <div class="p1756456030 p1756456030-2 pl30 pr30 fac jcc">
              <uv-icon name="warning-fill" color="#333" size="45rpx"></uv-icon>
              <div style="color: #3E3A39;" class="fz28">遇到问题</div>
            </div>
            <div v-if="form.service_status == 2" class="p1756456030 jcc fac  pl30  ">
              <img style="margin-top: 8rpx;width: 35rpx;height: 35rpx;" src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0903/1db6b202509030903217551.png" alt="">
              <div style="color: #3E3A39;" class="fz28 ">转单</div>
            </div>
          </div>
          <div v-if="form.service_status != 4 && form.service_status != 5" class="pl30 ml20" style="max-width: 55%;width: 55%;box-sizing: border-box;">
            <button v-if="form.is_report_location == 0 && form.service_status == 2 && form.purchase_address_type != 2" @click="$refs.orderPop.openFun('上报到位置')" class="common-button fz30  pt10 pb10" style="width: 100%;color: #fff;background-color: #E60012;">上报到位置</button>
            <button v-if="(form.is_report_location == 1 && form.service_status == 2 && form.type != 3) " @click="wyqhTap" class="common-button fz30  pt10 pb10" style="width: 100%;color: #fff;background-color: #E60012;">{{form.type == 1 || form.type == 2 || form.type == 3 ? '我已取货' : '开始服务'}}</button>
            <button v-if="(form.is_report_location == 1 || (form.purchase_address_type == 2 && form.is_report_location == 0)) && form.service_status == 2 && form.type == 3" @click="$refs.orderPop.openFun('我已购买')" class="common-button fz30  pt10 pb10" style="width: 100%;color: #fff;background-color: #E60012;">我已购买</button>
            <button v-if="(form.service_status == 3 && form.type != 3) || (form.type == 3 && form.is_pay_advance_price == 1)" @click="$refs.orderPop.openFun(form.type  == 1 || form.type == 2 || form.type == 3 ? '送达' : '我已完成')" class="common-button fz30  pt10 pb10" style="width: 100%;color: #fff;background-color: #00AF53;">{{form.type == 1 || form.type == 2 || form.type == 3 ? '我已送达' : '我已完成'}}</button>
            <button v-if="form.service_status == 3 && form.type == 3 && form.is_pay_advance_price != 1" @click="$refs.orderPop.openFun('发起支付')" class="common-button fz30  pt10 pb10" style="width: 100%;color: #fff;background-color: #00AF53;">发起支付</button>
          </div>
        </div>
      </template>
    </u-my-layOut>

  </div>
</template>

<script>
import payVue from '@/components/pay.vue'
import mapVue from './components/map.vue'
import myLayOutVue from './components/layOut.vue'
import orderTopVue from './components/orderTop.vue'
import informationVue from './components/information.vue'
import orderRevenueVue from './components/orderRevenue.vue'
import orderTimeVue from './components/orderTime.vue'
import orderPopVue from './components/orderPop.vue'
import dataJsonMixin from './mixin/dataJson.js'
import payMixin from './mixin/payMixin.js'
import commonMixin from './mixin/common.js'
import {
  getOrderInfo,
  grabOrders,
  drivingRoute,
  ipLocation
} from '@/api/neighbor.js'
export default {
  components: {
    'u-my-layOut': myLayOutVue,
    'u-lst-map': mapVue,
    'u-pay': payVue,
    'u-order-top': orderTopVue,
    'u-information': informationVue,
    'u-order-revenue': orderRevenueVue,
    'u-order-time': orderTimeVue,
    'u-order-pop': orderPopVue,

  },
  mixins: [dataJsonMixin, payMixin, commonMixin],
  data() {
    return {
      skeletonsLoading: true,
      routeQuery: {},
      form: {}
    }
  },
  onShow() {
    // try {
    //   wx.authorize({
    //     scope: 'scope.userLocation',
    //     success() {
    //       console.log('用户已经同意小程序使用位置信息')
    //       wx.getLocation({
    //         type: 'wgs84',
    //         success: function (res) {
    //           console.log('当前位置的经度：' + res.longitude);
    //           console.log('当前位置的纬度：' + res.latitude);
    //         },
    //         fail(err) {
    //           console.error(err, '====')
    //         }
    //       });
    //       // wx.getLocation({
    //       // 	type: 'wgs84',
    //       // 	success(res) {
    //       // 		console.log(res.latitude, res.longitude)
    //       // 	},
    //       // 	fail(err) {
    //       // 		console.error(err, '====')
    //       // 	}
    //       // })
    //     },
    //     fail() {
    //       // 用户拒绝授权
    //       // wx.showModal({
    //       // 	title: '提示',
    //       // 	content: '请同意授权位置信息',
    //       // 	showCancel: false,
    //       // 	success(modalSuccess) {
    //       // 		if (modalSuccess.confirm) {
    //       // 		wx.openSetting({
    //       // 		success(res) {
    //       // 		// 成功打开设置页面并返回当前权限状态
    //       // 		console.log(res.authSetting);
    //       // 		// 例如：查看位置权限是否开启
    //       // 		if (res.authSetting['scope.userLocation']) {
    //       // 		console.log('位置权限已开启');
    //       // 		}
    //       // 		},
    //       // 		fail(err) {
    //       // 		// 打开设置页面失败
    //       // 		console.error('打开设置失败：', err);
    //       // 		}
    //       // 		})
    //       // 		}
    //       // 	}
    //       // })
    //     }
    //   })
    // } catch (error) {

    // }

    // wx.getSetting({
    // 	success(res) {
    // 		if (!res.authSetting['scope.userLocation']) {
    // 		wx.authorize({
    // 		scope: 'scope.userLocation',
    // 		success() {
    // 		console.log(res.authSetting, 123)
    // 		wx.getLocation({
    // 		type: 'wgs84',
    // 		success(res) {
    // 		console.log(res, '=====')
    // 		},
    // 		fail(err) {
    // 		console.log(err)
    // 		}
    // 		})
    // 		// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
    // 		}
    // 		})
    // 		}
    // 	}
    // })

  },
  onLoad(options) {
    if (options) this.routeQuery = options
    this._initPage()
  },
  methods: {
    wyqhTap() {
      if (this.form.type == 1 || this.form.type == 2 || this.form.type == 3) {
        this.successChange({
          showType: '我已取货'
        })
      } else {
        this.$refs.orderPop.openFun('开始服务')
      }
    },
    popPwdChange() {
      this.$set(this.paymentForm, 'password', '');
    },
    closeChange() {
      this._initPage()
    },
    successChange(value) {
      let {
        showType
      } = value
      if (showType == '开始服务' || showType == '我已取货') {
        this.startServiceTap(this.form.id, res => {
          this.$refs.orderPop.closeTap()
          this._initPage()
        })
        return
      }
      if (showType == '我已购买') {
        if (value.fileList && value.advance_payment_price) {
          this.havePurchasedTap({
            order_id: this.form.id,
            advance_payment_price: value.advance_payment_price,
            advance_payment_images: value.fileList
          }, () => {
            this.$refs.orderPop.closeTap()
            this._initPage()
          })
        }
        return
      }
      if (showType == '发起支付') {
        this.initiationOfPaymentsTap({
          order_id: this.form.id,
          advance_payment_images: value.fileList,
          advance_payment_price: value.advance_payment_price
        }, () => {
          this.$refs.orderPop.closeTap()
          this._initPage()
        })
        return
      }
      if (showType == '上报到位置') {
        this.reportLocationTap(this.form.id, () => {
          this.$refs.orderPop.closeTap()
          this._initPage()
        })
        return
      }
      if (showType == '我已送达' || showType == '我已完成') {
        this.haveDeliveredTap({
          order_id: this.form.id,
          type: this.form.type,
          images: value.fileList
        }, () => {
          this.$refs.orderPop.closeTap()
          this._initPage()
        })
        return
      }
    },
    _initPage() {
      if (!this.routeQuery.id) return
      this.skeletonsLoading = true
      getOrderInfo(this.routeQuery.id).then(res => {
        if (res.code === 200) {
          // this.skeletonsLoading = false
          // ipLocation().then(res1 => {
          //   if (res1.code == 200 && res1.result?.result?.location?.lat) {
          //     let { lat, lng } = res1.result.result.location
          //     if (this.form.neighbor_worker) {
          //       this.$set(this.form.neighbor_worker, 'lat', lat)
          //       this.$set(this.form.neighbor_worker, 'lng', lng)
          //     }
          //   }
          // }).catch(err => console.log(err))
          let data = JSON.parse(JSON.stringify(res.result))
          let _d = {
            address: data.delivery_address_address,
            area: data.delivery_address_area,
            city: data.delivery_address_city,
            number: data.delivery_address_number,
            lat: (Number(data.delivery_address_lat) == 0 || Number(data.delivery_address_lat) == NaN) ? '' : Number(data.delivery_address_lat),
            lng: (Number(data.delivery_address_lng) == 0 || Number(data.delivery_address_lng) == NaN) ? '' : Number(data.delivery_address_lng),
            name: data.delivery_address_name,
            province: data.delivery_address_province,
            storey: data.delivery_address_storey,
            tel: data.delivery_address_tel,
            town: data.delivery_address_town
          }
          let _p = {
            address: data.pickup_address_address,
            area: data.pickup_address_area,
            city: data.pickup_address_city,
            number: data.pickup_address_number,
            lat: (Number(data.pickup_address_lat) == 0 || Number(data.pickup_address_lat) == NaN) ? '' : Number(data.pickup_address_lat),
            lng: (Number(data.pickup_address_lng) == 0 || Number(data.pickup_address_lng) == NaN) ? '' : Number(data.pickup_address_lng),
            name: data.pickup_address_name,
            province: data.pickup_address_province,
            storey: data.pickup_address_storey,
            tel: data.pickup_address_tel,
            town: data.pickup_address_town
          }
          let _pur = {
            storey: data.purchase_shop_title,
            address: data.purchase_shop_address,
            lat: (Number(data.purchase_shop_lat) == 0 || Number(data.purchase_shop_lat) == NaN) ? '' : Number(data.purchase_shop_lat),
            lng: (Number(data.purchase_shop_lng) == 0 || Number(data.purchase_shop_lng) == NaN) ? '' : Number(data.purchase_shop_lng),
          }
          data._d = _d
          data._p = _p
          data._pur = _pur
          this.form = data
          this.$nextTick(() => {
              this.$refs.uMapVue && this.$refs.uMapVue._initMap()

          })
        }
      }).catch(err => console.log(err))
    },
  },
}
</script>
<style>
page {
   color: #333;  background-color: #F7F8F8;

}
</style><style lang="scss" scoped>
@import "./common.scss";
.mt30 {
  margin-top: 30rpx;
}

.mt20 {
  margin-top: 20rpx;
}
.pt20 {
  padding-top: 20rpx;
}

.p1756534039 {
  position: relative;
  z-index: 971;
  margin-top: -25vh;
}

.p1756533109-5,
.p1756533109-4 {
  .p1756534039 {
    margin-top: 30rpx;
  }
  .p1756456030 {
    width: 50%;
  }
}

.p1756537208 {
  width: 100%;
  height: 180rpx;
  min-height: 180rpx;
}

.p1756456538 {
  width: 15rpx;
  min-width: 15rpx;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.p1756456030 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  white-space: nowrap;
}

.p1756716066 {
  background-color: #fff;
  padding-right: 30prx;
  padding-left: 30rpx;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  z-index: 973;
  box-sizing: border-box;
}

.common-button {
  height: 80rpx;
}

.p1756533109-2,
.p1756533109-3 {
  .p1756882892 {
    width: 45%;
  }

  .p1756456030-2 {
    border-right: 2rpx solid #dcdddd;
  }
}

.p1756533109-4,
.p1756533109-5 {
  .p1756882892 {
    width: 100%;
  }

  .p1756456030-2 {
    border-left: 2rpx solid #dcdddd;
  }
}

.p1756545778 {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 973;
}
</style>
